﻿<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <title></title>
    <link href="css/two.css" rel="stylesheet" type="text/css" />
</head>
<body>
        <div id="content">
            <div id="home" class="text">
                <h1>Amazing grungy slide out stuff</h1>
                <p>This is an example of some text!</p>
                <p>If anybody looks at a picture by Claude Monet from the point of view of
                    a Raphael, he will see nothing but a meaningless jargon of wild
                    paint-strokes. And if anybody looks at a Raphael from the point of view
                    of a Claude Monet, he will, no doubt...</p>
            </div>
            <div id="about" class="text" style="display:none;">
                <h1>Some amazing about section</h1>
                <p>This is an example of some text!</p>
                <p>In tone drawing there is not only the shape of the masses to be
                    considered, but their values--that is, their position in an imagined
                    scale from dark to light. The relation of the different tones in this
                    way--the values, as it is called--is an extremely important matter in
                    painting.</p> 
            </div>
            <div id="search" class="text" style="display:none;">
                <h1>Search the world!</h1>
                <p>This is an example of some text!</p>
                <p><label for="searchinput">Search for:</label><input type="text"/></p>
            </div>
            <div id="photos" class="text" style="display:none;">
                <h1>Some awesome photos</h1>
                <p>This is an example of some text!</p>
                <p>
					<img alt="img" src="img1.png" width="170" height="120"/>
					<img alt="img" src="img1.png" width="170" height="120"/>
					<img alt="img" src="img1.png" width="170" height="120"/>
				</p>
            </div>
            <div id="contact" class="text" style="display:none;">
                <h1>Get in touch</h1>
                <p>This is an example of some text!</p>
                <p>Some contact details...</p>
            </div>
        </div>
        <ul id="navigation">
            <li class="home"><a title="Home">Home</a></li>
            <li class="about"><a title="About">About</a></li>
            <li class="search"><a title="Search">Search</a></li>
            <li class="photos"><a title="Photos">Photos</a></li>
            <li class="contact"><a title="Contact">Contact</a></li>
        </ul>

    <script src="../../common_script/jquery-1.6.2.min.js" type="text/javascript"></script>
    <script type="text/javascript">
        $(function () {
            var d = 300;
            $('#navigation a').each(function () {
                var $this = $(this);
                var r = Math.floor(Math.random() * 41) - 20;
                $this.css({ '-moz-transform': 'rotate(' + r + 'deg)', '-webkit-transform': 'rotate(' + r + 'deg)', 'transform': 'rotate(' + r + 'deg)' });
                $('#content').css({ '-moz-transform': 'rotate(' + r + 'deg)', '-webkit-transform': 'rotate(' + r + 'deg)', 'transform': 'rotate(' + r + 'deg)' });
                $this.stop().animate({
                    'marginTop': '-70px'
                }, d += 150);
            });
            $('#navigation > li').hover(
		function () {
		    var $this = $(this);
		    $('a', $this).stop().animate({
		        'marginTop': '-40px'
		    }, 200);
		},
		function () {
		    var $this = $(this);
		    $('a', $this).stop().animate({
		        'marginTop': '-70px'
		    }, 200);
		}
	).click(function () {
	    var $this = $(this);
	    var name = this.className;
	    $('#content').animate({ marginTop: -600 }, 300, function () {
	        var $this = $(this);
	        var r = Math.floor(Math.random() * 41) - 20;
	        $this.css({ '-moz-transform': 'rotate(' + r + 'deg)', '-webkit-transform': 'rotate(' + r + 'deg)', 'transform': 'rotate(' + r + 'deg)' });
	        $('#content div').hide();
	        $('#' + name).show();
	        $this.animate({ marginTop: -200 }, 300);
	    })
	});
        });
</script>
</body>
</html>
